<template>
  <div class="searches">
    <div class="search">
      <router-link to='/'>
      <div class="back">
        <i class="iconfont">&#xe61f;</i>
      </div>
      </router-link>
      <div class="oInput">
        <i class="iconfont">&#xe60d;</i>
        <input type="text" placeholder="请输入商家或商品名称"/>
      </div>
      <div class="btn">
        <div>搜索</div>
      </div>
    </div>
    <div class="hot">
      <div>热门搜索</div>
    </div>
    <div class="shops">
      <div class="name">
        <router-link to='/business'>
        <div>湘粉人家</div>
        </router-link>
        <div>牛王庙</div>
        <div>义泰昌现炒快餐</div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
    
    }
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';

.searches{
  
  .search{
    height: px2rem(88);
    display: flex;
    background: white;
    .back{
      width: px2rem(74);
      height: px2rem(88);
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont{
        font-size: px2rem(44);
        color: #333;
        font-weight: bold;
      }
    }
    .oInput{
      width: px2rem(540);
      height: px2rem(60);
      border-radius: px2rem(5);
      margin-top: px2rem(14);
      background: #f2f2f2;
      .iconfont{
        font-size: px2rem(28);
        
      }
      input{
        width: px2rem(486);
        height: px2rem(40);
        background: #f2f2f2;
        border: 0;
        font-size: px2rem(24);
        outline: none;
      }
    }
    .btn{
      margin: px2rem(14) 0 0 px2rem(20);
      div{
        width: px2rem(100);
        height: px2rem(60);
        background: #ffd161;
        font-size: px2rem(24);
        color: black;
        text-align: center;
        line-height: px2rem(60);
        border-radius: px2rem(5);
      }
    }
  }
  .hot{
    padding-left:px2rem(30);
    height: px2rem(72);
    background: white;
    div{
      /*line-height: px2rem(72);*/
      padding-top: px2rem(10);
      padding-bottom: px2rem(24);
      text-align: left;
      font-size: px2rem(24);
      color: #656565;
      border-bottom: px2rem(1) solid #E4E4E4;
    }
  }
  .shops{
    padding-left:px2rem(30);
    height: px2rem(124);
    background: white;
    .name{
      display: flex;
      div{
        padding: px2rem(16) px2rem(30);
        border: px2rem(1) solid #cccccc;
        font-size: px2rem(24);
        color: black;
        border-radius: px2rem(5);
        margin-top: px2rem(30);
        margin-right: px2rem(20);
      }
    }
  }
}

</style>